<!DOCTYPE html>
<html>
<head>
    <meta name="layout" content="main"/>
    <g:set var="entityName" value="${message(code: 'account.label', default: 'account')}"/>
    <title>首页</title>
    <style>
    %{--设置点击侧边栏如果大于当前屏幕高度则地图会变形--}%
    #wrapper{
        min-height: 0!important;
    }
    .heatImg{
        position: absolute;
        z-index: 10;
        right: 20px;
        bottom: 105px;
    }
    .housingImg{
        position: absolute;
        z-index: 10;
        right: 20px;
        bottom: 105px;
        display: none;
    }
    .clusterImg{
        position: absolute;
        z-index: 10;
        right: 20px;
        bottom: 105px;
        display: none;
    }
    .list-group>.col-lg-2{
        height: 100%;
        width: 20%;
        float: left;
        padding-left: 0;
        margin-bottom: 17px;
    }
    .firstFont{
        font-size: 14px;
        color: #fff;
    }
    .secondFont{
        font-size: 22px!important;
        color: #fff!important;
    }
    .leftBox{
        float: right;
        margin-top: -135px;
        left: -1%;
        position: relative;
        z-index: 9;
        width: 14%;
        height: 30px;
    }
    .rightBox{
        float: right;
        margin-top: -159px;
        left: 13.7%;
        position: relative;
        z-index: 9;
        width: 14%;
        height: 30px;
    }
    .centerBox{
        float: right;
        margin-top: -129px;
        left: 8.9%;
        position: relative;
        width: 16.5%;
    }
    </style>
    <!-- map -->
    <asset:javascript src="newMap/libs/ol/ol.js" type="text/javascript" />
    <g:link href="../../assets/javascripts/newMap/libs/ol/ol.css" rel="stylesheet" type="text/css" />
    <asset:javascript src="newMap/libs/ol/xdmap.js" type="text/javascript" />
    <g:link href="../../assets/javascripts/newMap/libs/ol/map.css" rel="stylesheet" type="text/css" />
    <!--libs-->
    %{--<asset:javascript src="newMap/libs/converter.js"/>--}%
    <asset:javascript src="newMap/heatmap/heatmapMain.js"/>
    <asset:stylesheet href="newMap/heatmap.css"/>
</head>
<body class="fixed-navbar fixed-sidebar">
<asset:javascript src="newMap/heatmap/doHeat.js"/>

<div class="content animate-panel p-b-n">
    <div class="row">
        <div class="hpanel">

            <ul class="list-group" id="goSearch" style="margin-bottom: 0;">
                <div class="col-lg-2">
                    <div class="hpanel stats">
                        <div class="panel-body new-nanel-body" style="background: #FB6E52; color: #fff;border-radius: 6px;">
                            <div class="stats-title pull-left">
                                <h5 style="font-weight: normal;">押品数量</h5>
                            </div>
                            <div class="stats-icon pull-right">
                                <asset:image src="houseReport_.png" class="pull-right index-image"/>
                            </div>
                            <div class="m-t-xl">
                                <h3 class="m-b-xs">
                                    <a href="" id="estateCount" class="secondFont"></a>
                                    <a href="" id="monthResult" class="firstFont" style="position: absolute;top: 71px;margin-left: 5px;"></a>
                                </h3>
                            </div>
                        </div>

                    </div>
                </div>

                <div class="col-lg-2">
                    <div class="hpanel stats" >
                        <div class="panel-body new-nanel-body" style="background: #FFC85B; color: #fff;border-radius: 6px;">
                            <div class="stats-title pull-left">
                                <h5 style="font-weight: normal;">押品面积</h5>
                            </div>
                            <div class="stats-icon pull-right">
                                <asset:image src="houseArea_.png" class="pull-right index-image"/>
                            </div>
                            <div class="m-t-xl">
                                <h3 class="m-b-xs">
                                    <a href=""  id="buildArea" class="secondFont"></a>
                                    <h6></h6>
                                </h3>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-2">
                    <div class="hpanel stats">
                        <div class="panel-body new-nanel-body" style="background: #34C4E9; color: #fff; opacity: 0.8;border-radius: 6px;">
                            <div class="stats-title pull-left">
                                <h5 style="font-weight: normal;">贷款余额</h5>
                            </div>
                            <div class="stats-icon pull-right">
                                <asset:image src="buildTax_.png" class="pull-right index-image"/>
                            </div>
                            <div class="m-t-xl">
                                <h3 class="m-b-xs">
                                    <a href="" id="loansBalance" class="secondFont"></a>
                                    <h6></h6>
                                </h3>
                            </div>
                        </div>
                    </div>
                </div>


                <div class="col-lg-2">
                    <div class="hpanel stats">
                        <div class="panel-body new-nanel-body" style="background: #38D8BC; color: #fff; opacity: 0.8;border-radius: 6px;">
                            <div class="stats-title pull-left">
                                <h5 style="font-weight: normal;">押品估值</h5>
                            </div>
                            <div class="stats-icon pull-right">
                                <asset:image src="houseProve_.png" class="pull-right index-image"/>
                            </div>
                            <div class="m-t-xl">
                                <h3 class="m-b-xs">
                                    <a href="" id="loansEvaluatePrice" class="secondFont"></a>
                                    <h6></h6>
                                </h3>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-2" style=" padding-right: 0;">
                    <div class="hpanel stats">
                        <div class="panel-body new-nanel-body" style="background: #FC8D51; color: #fff; opacity: 0.9;border-radius: 6px;">
                            <div class="stats-title pull-left">
                                <h5 style="font-weight: normal;">平均动态抵押率</h5>
                            </div>
                            <div class="stats-icon pull-right">
                                <asset:image src="capitalRating_.png" class="pull-right index-image"/>
                            </div>
                            <div class="m-t-xl">
                                <h3 class="m-b-xs">
                                    <a href="" id="dynamicMortgageRate" class="secondFont"></a>
                                    <h6></h6>
                                </h3>
                            </div>
                        </div>
                    </div>
                </div>

            </ul>

            %{--覆盖多余部分--}%
            %{--<div class="leftBox"></div>--}%
            <div class="tooltip-demo text-center centerBox">
                <div data-toggle="tooltip" data-placement="bottom" title="" data-original-title="点击图标查看数据说明">
                    <a class="fa fa-info-circle" href="#myModal" data-toggle="modal" style="font-size: 20px; color: #ccc"></a>
                </div>
            </div>
            %{--覆盖多余部分--}%
            <div class="rightBox"></div>

        </div>


    </div>
</div>

<div  id="allmap" style="position: absolute;">
    <div class="heatmap" style="display: none">
        <div style="float: left;display: none">
            <div style="font-size:16px; margin-top:15px; margin-left:5px;">半径</div>
            <div style="height:32px; margin-top:5px; margin-left:5px; "><input style="width:220px;" id="radius" type="range" min="1" max="10" step="1" value="3"/></div>
        </div>
        <div style="float: right; display: none">
            <div style="font-size:16px; margin-top:15px; margin-left:5px;">模糊度</div>
            <div style="height:32px; margin-top:5px; margin-left:5px;"><input style="width:220px;" id="blur" type="range" min="1" max="20" step="1" value="5"/></div>
        </div>

    </div>
    <asset:image src="heatImg.png" class="heatImg"/>
    <asset:image src="clusterImg.png" class="clusterImg"/>
    <asset:image src="housingImg.png" class="housingImg"/>
</div>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="color-line" style="background: #3498db"></div>
            <div class="modal-header text-left">
                <h4 class="modal-title" style="padding-left: 40px;color: #3498db">数据说明</h4>
            </div>
            <div class="modal-body">
                <p><strong>押品数量</strong><br/>金融机构的房地产押品数量总和</p>
                <p><strong>押品面积</strong><br/>金融机构的房地产押品面积总和</p>
                <p><strong>贷款余额</strong><br/>借款人尚未归还的贷款总额，包括未归还的贷款本金和贷款利息</p>
                <p><strong>押品估值</strong><br/>金融机构的房地产押品当前估值总和</p>
                <p><strong>平均动态抵押率</strong><br/>动态抵押率是当前抵押贷款余额与当前抵押房产价值之间的比率，而平均动态抵押率是所有动态抵押率的平均值</p>
                <p><strong>风险分布</strong><br/>金融机构的押品价值波动风险抵押率</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>


<g:javascript>

    $(function(){
        initStatics("",-1,1)
    })

    $("#loansBalance,#loansEvaluatePrice,#buildArea,#estateCount,#dynamicMortgageRate").click(function(){
        window.location.href="/estate/index";
    });
    $('#monthResult').click(function () {
        var now = new Date();
        var year = now.getFullYear();
        var month = now.getMonth()+1;
        var firstDate = year+"年"+month+"月"+"01日";
        var lastDay = getLastDay(year,month);
        var lastDate = year+"年"+month+"月"+lastDay+"日";
//获取一个月的最后一天
        function getLastDay(year,month){
            var new_year = year;        //取当前的年份
            var new_month = month++;    //取下一个月的第一天，方便计算（最后一天不固定）
            if(month>12){                //如果当前大于12月，则年份转到下一年
                new_month -=12;            //月份减
                new_year++;                //年份增
            }
            var new_date = new Date(new_year,new_month,1);   // 取当年当月的 下个 月中的第一天
// 获取当月最后一天日期
            return (new Date(new_date.getTime()-1000*60*60*24)).getDate();
        }

        window.location.href ="/estate/index?createdDateStart="+firstDate+"&createdDateEnd="+lastDate;
    })
    var initStatics=function (city,zoneNumber,level) {
    // 从后台取数据
        $.ajax({
            type: "POST",
            url: "/main/statistics",
            data: {
                city: city,
                zoneNumber:zoneNumber,
                level:level
            },
            success: function (msg) {
                var staticsData=msg.dataResult[0];
                var staticsLtv= (staticsData['loansBalance']/staticsData['loansEvaluatePrice']*100).toFixed(2);
                if(msg.dataResult==null){
                    return
                }
                $("#loansBalance").text(transition(staticsData['loansBalance'] || 0)+unit(staticsData['loansBalance'])+'元')
                $("#loansEvaluatePrice").text(transition(staticsData['loansEvaluatePrice'] || 0)+unit(staticsData['loansEvaluatePrice'])+'元')
                $("#buildArea").text(transition(staticsData['buildArea'] || 0)+unit(staticsData['buildArea'])+'平方米')
                $("#estateCount").text(transition(staticsData['estateCount'])+unit(staticsData['estateCount'])+"笔")
                $("#monthResult").html("本月新增"+transition(staticsData['monthResult'])+unit(staticsData['monthResult'])+"笔")
                if(isNaN(staticsLtv)){
                    staticsLtv = 0
                }
                $("#dynamicMortgageRate").text(staticsLtv+'%')
            }
        })

    }

    var url ='/map/heatData';
    var blur = document.getElementById("blur");
    var radius = document.getElementById("radius");
    var map = xdmap.mapInit('allmap', 4, [12122301.189802673,4070118.8821290657]);
    map.getView().setMaxZoom(18);
    map.getView().setMinZoom(4);
    map.getView().setZoom(5);

    var mapUrl = window.location.href;
    var params = {};
    var args = mapUrl.split("?");
    if (args.length == 1 || args[1] == '') {
        params = {currentMap:'heatMap'};
    }else{
        params = getUrlParams(args[1]);
    }
    heatmap.getHeatMap(params,blur,radius);
    //获取url参数
    function getUrlParams(urlParams){
        var inputData = {};
        var params = urlParams.split("&");
        for(var i = 0; i < params.length; i ++) {
            inputData[params[i].split("=")[0]]=(params[i].split("=")[1]);
        }
        return inputData;
    }
</g:javascript>
</body>
</html>
